<template>
  <div class="back">
    <el-container>
      <el-header height="10%">
        <div class="header-div">
          <img class="img-title" src="@/assets/img/index/title.png" />
          <div class="header-font">桐庐县江南镇人民政府</div>
        </div>
        <div style="width: 400px; margin-top: 15px; margin-right: 18px">
          <el-input
            v-model="search"
            placeholder="搜索"
            style="width: 380px; position: relative; padding-right: 15px"
            size="small"
            @keyup.enter.native="doSearch"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="doSearch"
              style="position: absolute; right: 15px"
            ></i>
          </el-input>
        </div>
        <div class="user">
          <span class="username">{{ username }}</span>
          <span><el-avatar :size="40" :src="avatar"></el-avatar></span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="10%">
          <div class="left-region">
            <div class="goback" @click="back">
              <img class="img-back" src="@/assets/img/back.png" />
              <span>返回</span>
            </div>
            <div :class="['nav', { active: show[0] }]" @click="showMeet">
              工程管理台账
            </div>
            <div :class="['nav', { active: show[1] }]" @click="showMess">
              新建工程
            </div>
          </div>
        </el-aside>
        <el-main>
          <div class="right-region">
            <div class="newMeet" v-show="show[0]">
              <div class="meet-head">
                <el-button type="primary" class="T_1" round>新建工程</el-button>
                <!-- <div class="meet-button-all">
                  <el-button class="meet-button" size="mini">提交</el-button>
                                    <el-button class="meet-button" size="mini">保存</el-button>
                </div> -->
              </div>
              <div class="division"></div>
              <div class="select">
                <div class="1">
                  <h4>
                    业主单位
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </h4>
                </div>
                <div class="2">
                  <h4>
                    工程名称
                    <el-input
                      type="text"
                      v-model="input"
                      placeholder="请输入工程名称"
                    />
                  </h4>
                </div>
                <div class="3">
                  <div class="block">
                    <h4 class="demonstration">
                      开工时间
                      <el-date-picker
                        v-model="date1"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </h4>
                  </div>
                </div>
                <div class="4">
                  <div class="block">
                    <h4 class="demonstration">
                      竣工时间
                      <el-date-picker
                        v-model="value2"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </h4>
                  </div>
                </div>
              </div>
              <el-table
                :data="tableData"
                tooltip-effect="dark"
                style="width: 1528px"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection"> </el-table-column>
                <el-table-column prop="name" label="业主单位">
                </el-table-column>
                <el-table-column prop="name" label="招标类型">
                </el-table-column>
                <el-table-column prop="address" label="项目编号">
                </el-table-column>
                <el-table-column prop="name" label="工程名称">
                </el-table-column>
                <el-table-column prop="name" label="预算(万元)">
                </el-table-column>
                <el-table-column prop="name" label="招标价(万元)">
                </el-table-column>
                <el-table-column prop="name" label="合同工期(天)">
                </el-table-column>
                <el-table-column prop="name" label="开标时间">
                </el-table-column>
                <el-table-column prop="name" label="中标单位">
                </el-table-column>
                <el-table-column prop="name" label="项目负责人">
                </el-table-column>
                <el-table-column prop="name" label="代理单位">
                </el-table-column>
                <el-table-column prop="name" label="监理单位">
                </el-table-column>
                <el-table-column prop="name" label="设计单位">
                </el-table-column>
                <el-table-column prop="name" label="开工时间">
                </el-table-column>
                <el-table-column prop="name" label="形象进度">
                </el-table-column>
                <el-table-column prop="name" label="竣工验收时间">
                </el-table-column>
                <el-table-column prop="name" label="评议情况">
                </el-table-column>
                <el-table-column prop="name" label="审计单位">
                </el-table-column>
                <el-table-column prop="name" label="审计价格">
                </el-table-column>
                <el-table-column prop="name" label="存在问题">
                </el-table-column>
                <el-table-column prop="name" label="备注"> </el-table-column>
              </el-table>

              <div class="block_1">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage3"
                  :page-size="100"
                  layout="prev, pager, next, jumper"
                  :total="1000"
                  style="float: right"
                  background
                >
                </el-pagination>
                <span style="float: right" class="demonstration"
                  >共{{ tableData.length }}条</span
                >
              </div>
            </div>
            <div class="newMess" v-show="show[1]">
              <div class="meet-head">
                <!-- <el-menu
                  :default-active="this.$route.path"
                  router
                  mode="horizontal"
                >
                  <el-menu-item
                    v-for="(item, i) in navList"
                    :key="i"
                    :index="item.name"
                  >
                    {{ item.navItem }}
                  </el-menu-item>
                </el-menu> -->
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="流程图表" name="third">
                    <div class="division"></div>
                    <el-form
                      :inline="true"
                      :model="formInline"
                      class="demo-form-inline"
                    >
                      <el-form-item label="工程名称">
                        <el-input
                          v-model="formInline.user"
                          placeholder="工程名称"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="业主单位">
                        <el-select
                          v-model="formInline.region"
                          placeholder="业主单位"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="开工时间">
                        <el-date-picker
                          v-model="date1"
                          type="date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="中标单位">
                        <el-select
                          v-model="formInline.region"
                          placeholder="中标单位"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="招标类型">
                        <el-select
                          v-model="formInline.region"
                          placeholder="招标类型"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="开标时间">
                        <el-date-picker
                          v-model="date1"
                          type="date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="代理单位">
                        <el-select
                          v-model="formInline.region"
                          placeholder="招标类型"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="项目编号">
                        <el-select
                          v-model="formInline.region"
                          placeholder="项目编号"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="竣工时间">
                        <el-date-picker
                          v-model="date1"
                          type="date"
                          placeholder="选择日期"
                        >
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="监理单位">
                        <el-select
                          v-model="formInline.region"
                          placeholder="监理单位"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="预算">
                        <el-select
                          v-model="formInline.region"
                          placeholder="预算"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="形象进度">
                        <el-select
                          v-model="formInline.region"
                          placeholder="形象进度"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="设计单位">
                        <el-select
                          v-model="formInline.region"
                          placeholder="设计单位"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="招标价">
                        <el-select
                          v-model="formInline.region"
                          placeholder="招标价"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="评议情况">
                        <el-select
                          v-model="formInline.region"
                          placeholder="评议情况"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="审计单位">
                        <el-select
                          v-model="formInline.region"
                          placeholder="审计单位"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="审计价格">
                        <el-select
                          v-model="formInline.region"
                          placeholder="审计价格"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="项目负责人">
                        <el-select
                          v-model="formInline.region"
                          placeholder="项目负责人"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="合同工期">
                        <el-select
                          v-model="formInline.region"
                          placeholder="合同工期"
                        >
                          <el-option
                            v-for="item in formInline.region"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="存在问题" class="V2">
                        <el-input
                          type="textarea"
                          v-model="formInline.desc"
                          class="V1"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="备注" class="V2">
                        <el-input
                          type="text"
                          v-model="formInline.desc"
                          class="V1"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="相关附件" class="V2">
                        <el-upload
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          multiple
                          :limit="3"
                          :on-exceed="handleExceed"
                          :file-list="fileList"
                        >
                          <el-button size="small" type="primary"
                            >点击上传</el-button
                          >
                        </el-upload>
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="流程图" name="fourth">
                    <div class="division"></div>
                    流程图</el-tab-pane
                  >
                </el-tabs>
                <div class="meet-button-all">
                  <el-button class="meet-button" size="mini">提交</el-button>
                  <el-button class="meet-button" size="mini">保存</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: [true, false],
      username: "用户名",
      avatar: "",
      search: "", //搜索内容
      options: [],
      options1: [],
      options2: "",
      input: "",
      value: "",
      formInline: {
        user: "",
        region: [],
        desc: "",
      },
      tableData: [],
      activeName: "third",
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      // navList:[
      //       {name:'/decision/processform',navItem:'流程图表'},
      //       {name:'/decision/flowchart',navItem:'流程图'},
      //   ]
    };
  },
  methods: {
    showMeet() {
      this.show.splice(0, 1, true);
      this.show.splice(1, 1, false);
    },
    showMess() {
      this.show.splice(0, 1, false);
      this.show.splice(1, 1, true);
    },
    //搜索框点击搜索
    doSearch() {
      console.log(this.search);
    },
    back() {
      this.$router.go(-1);
    },
    //表格选中的值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //导航栏
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    //   // if(key == 1){
    //   //    this.$router.pash("/decision/ processform")
    //   // }
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
  },
};
</script>

<style scoped>
.el-header {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.el-aside {
  height: 15%;
  margin-left: 40px;
  padding: 5px 10px 5px 10px;
  background-color: rgb(60, 136, 172);
  border-radius: 8px;
  overflow: hidden;
  color: white;
}
.el-main {
  height: 95%;
  margin-right: 100px;
  margin-left: 20px;
  border-radius: 10px;
  background-color: white;
}
.back {
  background-image: linear-gradient(#7ccae2, #757575);
  background: url("../../assets/img/background.png");
  background-size: 100% 100%;
  display: flex;
  height: 100%;
  vertical-align: top;
}
.right-region {
  width: 100%;
  height: 98%;
}
.img-title {
  width: 190px;
  height: 190px;
  margin-top: -45px;
  margin-left: -50px;
}
.header-div {
  margin-top: -20px;
  vertical-align: middle;
  display: flex;
}
.header-font {
  font-size: 35px;
  margin-top: 30px;
  margin-left: -50px;
  color: white;
}
.user * {
  font-size: 15px;
  vertical-align: middle;
  margin-top: 10px;
}
.user {
  margin-right: 80px;
}
.nav {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
}
.active {
  background-color: rgb(245, 170, 32);
}
.img-back {
  width: 20px;
  height: 20px;
}
.goback * {
  font-size: 15px;
  vertical-align: middle;
}
.goback {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}
/* 新建会议第一层样式 */
.meet-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 15px;
}
/* 会议单个按钮样式 */
.meet-button {
  background-color: rgb(60, 136, 172);
  color: white;
  border-radius: 5px;
}
/* 分割线 */
.division {
  width: 100%;
  margin: 0 auto;
  height: 2px;
  background-color: rgb(184, 184, 184);
}
.T_1 {
  background-color: rgb(245, 170, 32);
  width: 120px;
}
/* 按钮区域样式 */
.meet-button-all {
  position: absolute;
  right: 125px;
}
.el-tabs {
  width: 100%;
}
.select {
  display: flex;
  justify-content: space-around;
}
.el-input {
  width: 70%;
}
.el-select {
  width: 73%;
}
/deep/ .el-table th > .cell {
  padding: 0 !important;
}
.block_1 {
  position: fixed;
  bottom: 6%;
  right: 6%;
}
.V2 {
  width: 100%;
}
.V1 {
  width: 400%;
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 18px;
  margin-top: 10px;
}
</style>